<template>
	<view>	
	<!--轮渡使用
		<view class="container2">
			<image src="https://www.chuandaolundu.com/uploads/cdld.jpg" mode="aspectFill" style="width: 100%;height: 300px;"></image>
		
			<view class="con2">
				<view class="box">
					<view class="box-l" @click="openGoPopup(true)">
						<view class="box-text">出发地</view>
						<view class="box-pick">
							<view>{{selectGoPlace?selectGoPlace:`选择港口`}}</view>
						</view>
					</view>
					<view class="box-m">
						<image src="../../static/c.png" mode="aspectFill" style="width: 42px;height: 42px;"></image>
					</view>
					<view class="box-r" @click="openDestPopup(false)">
						<view class="box-text r-text">目的地</view>
						<view class="box-pick">
							<view style="text-align: right;">{{selectDestPlace?selectDestPlace:`选择港口`}}</view>
						</view>
					</view>
				</view>		
		
				<view class="away-pay-btn">
					<view class="btn" :class="{disabled:status==false}" @click="nextStep">立即购票</view>
				</view>
				<uni-popup ref="gPopup" background-color="#fff">
					<uni-card padding="20px">
						<view style="position: absolute;right: 20rpx;top: 20rpx;" @click="closeGoPopup"><uni-icons
								type="close" size="24"></uni-icons></view>
						<view style="text-align: center;font-size: 40rpx;font-weight: bold;margin-bottom: 40rpx;">出发港口
						</view>
						<view v-for="item in goPlaceList">
							<button style="width: 500rpx;margin-bottom: 30rpx;" type="default"
								@click="selectGoPopup(item)">{{item}}</button>
						</view>
					</uni-card>
				</uni-popup>
		
				<uni-popup ref="dPopup" background-color="#fff">
					<uni-card padding="20px">
						<view style="position: absolute;right: 20rpx;top: 20rpx;" @click="closeDestPopup"><uni-icons
								type="close" size="24"></uni-icons></view>
						<view style="text-align: center;font-size: 40rpx;font-weight: bold;margin-bottom: 40rpx;">目的港口
						</view>
						<view v-for="item in destPlaceList">
							<button style="width: 500rpx;margin-bottom: 30rpx;" type="default"
								@click="selectDestPopup(item)">{{item}}</button>
						</view>
					</uni-card>
				</uni-popup>
			</view>				
		</view>
		-->
		<view v-if="globalLoad">
			
			<block v-if="path.index && path.index.path">
				
				 <!-- #ifndef MP-TOUTIAO -->
				<st-customize-header v-if="showHeader"></st-customize-header>
				<!-- 头部 -->
				<!-- #endif -->
				
				<block v-if="path.index.path === 'stourwebcms_templet_uni_no304_index'">
					<!-- 手机热门线路首页模板 -->
					<temIndex2></temIndex2>
				</block>
				<block v-else-if="path.index.path === 'stourwebcms_templet_uni_no305_index'">
					<!-- 小清新首页模板 -->
					<temIndex3></temIndex3>
				</block>
				<block v-else-if="path.index.path === 'stourwebcms_templet_uni_no306_index'">
					<!-- 手机清爽模板 -->
					<temIndex4></temIndex4>
				</block>
				<block v-else-if="path.index.path === 'stourwebcms_templet_uni_no307_index'">
					<!-- UNI手机综合首页模板 -->
					<temIndex5 :scrollTop="scrollTop"></temIndex5> 
				</block> 
				<block v-else-if="path.index.path === 'stourwebcms_templet_uni_no308_index'">
					<!-- UNI手机单酒店首页模板 -->
					<temIndex6 ref="hotel"></temIndex6> 
				</block>
				<block v-else-if="path.index.path === 'stourwebcms_templet_uni_no309_index'">
					<!-- UNI手机景区首页模板 -->
					<temIndex7 ref="spot" :scrollTop="scrollTop"></temIndex7>
				</block>
				<block v-else-if="path.index.path === 'stourwebcms_templet_uni_no310_index'">
					<!-- UNI手机多酒店首页模板 --> 
					<temIndex8 :destination="destination" :start_date="start_date" :start_date_fill="start_date_fill" :start_week="start_week" :end_date="end_date" :end_date_fill="end_date_fill" :end_week="end_week" :dayNum="dayNum" :scrollTop="scrollTop"></temIndex8>
				</block>
				<block v-else-if="path.index.path === 'stourwebcms_templet_uni_no311_index'">
					<!-- UNI文旅综合首页模板 -->
					<temIndex9 :scrollTop="scrollTop"></temIndex9> 
				</block>
				<block v-else-if="path.index.path === 'stourwebcms_templet_uni_no312_index'">
					<!-- 游轮首页模板 -->
					<temIndex10 :scrollTop="scrollTop" :scheduleDate="scheduleDate" :startDest="startDest" :endDest="endDest" @changeCity="changeCity"></temIndex10> 
				</block>
				
				<block v-else>
					<temIndex :scrollTop="scrollTop"></temIndex>
				</block>
			</block>
			<block v-else>
				
				<!-- #ifndef MP-TOUTIAO -->
				<!-- <st-customize-header v-if="showHeader"></st-customize-header>-->
				<!-- 头部 -->
				<!-- #endif -->
				
				<temIndex :scrollTop="scrollTop"></temIndex>
				
			</block>
		
		<!-- #ifdef MP-WEIXIN -->
		<st-weixin-privacy :showPrivacy="showPrivacy" @confirm="shutUp" @disagree="shutUp"></st-weixin-privacy>
		<!-- 用户隐私授权弹窗 -->
		<!-- #endif -->
			
		</view>
	</view>
</template>

<script>
	import stCustomizeHeader from "@/components/st-customize-header.vue";
	import temIndex from "@/components/templates/templates_global_home.vue";
	import temIndex2 from "@/components/templates/stourwebcms_templet_uni_no304_index.vue";
	import temIndex3 from "@/components/templates/stourwebcms_templet_uni_no305_index.vue";
	import temIndex4 from "@/components/templates/stourwebcms_templet_uni_no306_index.vue";
	import temIndex5 from "@/components/templates/stourwebcms_templet_uni_no307_index.vue";
	import temIndex6 from "@/components/templates/stourwebcms_templet_uni_no308_index.vue";
	import temIndex7 from "@/components/templates/stourwebcms_templet_uni_no309_index.vue";
	import temIndex8 from "@/components/templates/stourwebcms_templet_uni_no310_index.vue";
	import temIndex9 from "@/components/templates/stourwebcms_templet_uni_no311_index.vue";
	import temIndex10 from "@/components/templates/stourwebcms_templet_uni_no312_index.vue";
	import stWeixinPrivacy from "@/components/st-weixin-privacy.vue";
	import { get_date_format } from '@/utils/utils.js'
	export default {
		components: {
			stCustomizeHeader,
			temIndex,
			temIndex2,
			temIndex3,
			temIndex4,
			temIndex5,
			temIndex6,
			temIndex7,
			temIndex8,
			temIndex9,
			temIndex10,
			stWeixinPrivacy
		},
		
		data() {
			return {
				globalLoad: false,
				scrollTop: 0,
				path: '',
				temp: [],
				start_date: '',
				end_date: '',
				dayNum: 1,
				isUpdate: false,
				reload: false,
				shareData:{},
				topHeight: 0,
				statusHeight: 0,
				headerHeight: 0,
				cfgIndextitle:"首页",
				destination: {
					pinyin:'',
					kindname:''
				},
				start_date_fill:'',
				start_week:'今天',
				end_date_fill:'',
				end_week:'明天',
				showHeader: true,
				
				// 游轮模板数据
				scheduleDate: '',
				startDest: { // 出发地
					destid: '',
					cityname: '',
				},
				endDest: { // 到达地
					destid: '',
					cityname: '',
				},
				// #ifdef MP-WEIXIN
				showPrivacy: false, //是否展示用户隐私弹窗
				// #endif 
				suitid:'',
				status:false,
				goPlaceList: '',
				destPlaceList: '',
				selectGoPlace: '',
				selectDestPlace: '',
			}
		},
		onReady() {
			let cfg_home_page_title = uni.getStorageSync('cfg_home_page_title');
			this.cfgIndextitle = cfg_home_page_title?cfg_home_page_title:this.cfgIndextitle;
		},
		onLoad(options) {
			this.getTempInfo();
			// 请求参数统一管理
			options = this.$optionsManager(options)
			
			this.scheduleDate = get_date_format(new Date())
			
		},
		onShow() {
			this.hotelInit()
			
			this.$nextTick(() => {
				if(this.$refs.home){
					this.$refs.home.dest = this.destination
				}           
			});
			
			// 游轮选择城市
			if(this.reload){
				this.reload = false
			}
			
			// #ifdef MP-WEIXIN
			this.getPrivacy();
			// #endif
		
			// #ifdef H5
			// 页面分享
			this.$share();
			// #endif
			
			// #ifdef MP-ALIPAY || MP-BAIDU || MP-WEIXIN || MP-TOUTIAO
			this.sharePage();
			// #endif
		},
		
		watch: {
			destination(n, o){
				
			}
		},
		
		onReachBottom() {
			if(this.path.index && this.path.index.path === 'stourwebcms_templet_uni_no309_index'){
				this.$refs.spot.getRecommendList();
			}
		},
		
		// #ifdef MP-ALIPAY || MP-BAIDU || MP-WEIXIN || MP-TOUTIAO
		onShareAppMessage(res) { //右上角分享 微信小程序、百度小程序、字节跳动小程序、支付宝小程序
			if (this.shareData) {
				let sdata = this.shareData
				delete sdata.imageUrl;
				return sdata;
			}
		},
		onShareTimeline() { // 分享朋友圈
			if (this.shareData) {
				return this.shareData;
			}
		},
		
		// #endif
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			checkStatus() {
				if (this.selectGoPlace == '山咀港' && this.selectDestPlace == '上川岛') {
					this.suitid = 1
				} else if (this.selectGoPlace == '山咀港' && this.selectDestPlace == '下川岛') {
					this.suitid = 2
				} else if (this.selectGoPlace == '上川岛' && this.selectDestPlace == '山咀港') {
					this.suitid = 3
				} else if (this.selectGoPlace == '下川岛' && this.selectDestPlace == '山咀港') {
					this.suitid = 4
				}
				if (this.selectGoPlace && this.selectDestPlace) {
					this.status = true
				} else {
					this.status = false
				}
			},
			nextStep() {
				uni.showToast({
					title: "请选择出发地和目的地",
					icon: "none"
				})
				if(this.status){
					uni.navigateTo({
						url: `/subPackages/ferrys/detail?id=${this.suitid}`
					})
				}
				
			},
			selectGoPopup(item) {
				this.selectGoPlace = item
				this.selectDestPlace = ''
				this.goPlaceList = []
				this.destPlaceList = []
				this.$refs.gPopup.close()
				this.checkStatus()
			},
			openGoPopup() {
				this.goPlaceList = ["山咀港", "上川岛", "下川岛"]
			
				this.$refs.gPopup.open('top')
			},
			closeGoPopup() {
				this.$refs.gPopup.close()
			},
			selectDestPopup(item) {
				this.selectDestPlace = item
				this.$refs.dPopup.close()
				this.checkStatus()
			},
			openDestPopup() {
				switch (this.selectGoPlace) {
					case '山咀港':
						this.destPlaceList = ["上川岛", "下川岛"]
						break
					case '上川岛':
						this.destPlaceList = ["山咀港"]
						break
					case '下川岛':
						this.destPlaceList = ["山咀港"]
						break
				}
				this.$refs.dPopup.open('top')
			},
			closeDestPopup() {
				this.$refs.dPopup.close()
			},
			// #ifdef MP-ALIPAY || MP-BAIDU || MP-WEIXIN || MP-TOUTIAO
			//分享页面
			async sharePage() {
				let shareInfo = {};
				let shareData = await this.$mpShare(shareInfo);
				if (shareData) {
					this.shareData = shareData;
				}
			},
			// #endif
			
			// #ifdef MP-WEIXIN
			getPrivacy() {
				if (uni.getPrivacySetting) {
					uni.getPrivacySetting({
						success: res => {
							if (res.needAuthorization) {
								this.showPrivacy = true;
							} else {
								this.showPrivacy = false;
							}
						},
						fail: () => {},
						complete: () => {},
					})
				}
			},
			
			//关闭'用户隐私授权弹窗'
			shutUp() {
				this.showPrivacy = false;
			},
			// #endif
			
			async getTempInfo(){
				let infoRes,
				params = {
					method: "api/v2/system/get_template_no"
				}
				uni.showLoading({
					title: '加载中...'
				})
				infoRes = await this.$http(params);
				if(infoRes.status){
					uni.hideLoading();
					this.globalLoad = true;
					
					this.path = infoRes.data.path;
					this.temp = infoRes.data.tem;
					let index = infoRes.data.path.index;
			
					if(index && (index.path === 'stourwebcms_templet_uni_no309_index' || index.path === 'stourwebcms_templet_uni_no311_index' || index.path === 'stourwebcms_templet_uni_no312_index')){
						this.showHeader = false;
					}
					if(index && index.path === 'stourwebcms_templet_uni_no310_index'){
						this.showHeader = false;
						this.start_date = get_date_format(Date.now());
						this.start_date_fill = get_date_format(Date.now()).slice(5).replace(/-/g, '月') + '日';
						this.end_date = get_date_format(Date.now() + 60*60*24*1000);
						this.end_date_fill = get_date_format(Date.now() + 60*60*24*1000).slice(5).replace(/-/g, '月') + '日'
					}
				}
			},
			
			hotelInit(){
				if(this.$refs.hotel){
					this.$refs.hotel.hasLogin = this.$store.state.hasLogin;
					if(this.isUpdate){ // 登录后重新请求数据
						this.isUpdate = false;
						this.$refs.hotel.getSuitList();
					}
					if(this.reload){ // 单酒店模板日历房型筛选
						this.reload = false;
						this.$refs.hotel.start_date = this.start_date.replace(/\//g, '-');
						this.$refs.hotel.end_date = this.end_date.replace(/\//g, '-');
						this.$refs.hotel.dayNum = this.dayNum;
						this.$refs.hotel.getSuitList();
					}
				}
			},
			
			// 游轮切换城市
			changeCity(){
				let sdest = {
						...this.startDest
					},
					edest = {
						...this.endDest
					}
					
				this.startDest = {
					...edest
				}
				this.endDest = {
					...sdest
				}
			}
		}
	}
</script>

<style lang="scss">
	uni-page-body {
		display: inline;
	}

	.container2 {
		position: relative;
		width: 100%;
		height: 900rpx;		
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.map {
		width: 100%;
	}

	.con2 {
		position: absolute;
		width: 550rpx;
		padding: 40rpx 80rpx;
		border-radius: 40rpx;		
		top:500rpx;
		background-color: #fff;
	}

	.car-type-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;

		.car-item {
			margin-bottom: 30rpx;
			border-radius: 10rpx;
			width: 48%;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&.on {
				background-color: $uni-bg-color-primary;
				border-color: #2dbb55;
				color: $uni-text-color-inverse;
			}

			&.disabled {
				background-color: #f6f6f6;
				border-color: #f6f6f6;
				color: #9e9e9e;
			}
		}
	}

	.box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 80rpx;

		.box-l {
			display: flex;
			flex-direction: column;
			width: 200rpx;
		}

		.box-m {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.box-r {
			display: flex;
			flex-direction: column;
			width: 200rpx;
		}

		.r-text {
			text-align: end;
		}

		.box-text {
			font-size: 28rpx;
			color: #c2c2c2;
		}

		.box-pick {
			margin-top: 20rpx;
			font-size: 36rpx;
			color: #000;
			font-weight: bold;
		}
	}


	// 主导航 
	.menu-swiper-box {
		margin-top: 30rpx;
		position: relative;
		padding-bottom: 32rpx;
		padding: 0 80rpx;

		.menu-swiper {
			height: 320rpx;
			box-sizing: content-box;

			.menu-info {
				width: 100%;
				text-align: center;

				.list-url {
					float: left;
					width: 20%;
					height: 128rpx;
					margin-top: 32rpx;
					text-align: center;

					.item-pic {
						display: block;
						width: 80rpx;
						height: 80rpx;
						margin: 0 auto
					}

					.item-text {
						margin-top: 14rpx;
						font-size: 24rpx;
						height: 34rpx;
						line-height: 34rpx;
					}
				}
			}
		}

		.menu-dots {
			height: 28rpx;
			@extend .alignJustify;
			align-items: flex-end;

			.dot {
				width: 8rpx;
				height: 8rpx;
				border-radius: 4rpx;
				margin-right: 6rpx;
				background-color: #ccc;

				&.active {
					width: 28rpx;
					background-color: $uni-bg-color-primary;
				}
			}
		}
	}

	.away-pay-btn {
		@extend .justifyspacec;
		height: 124rpx;
		padding: 0 25rpx;
		font-size: $uni-font-size-sm;

		.left {
			@extend .displayflex;
		}

		.price {
			color: $uni-text-color-price;
		}

		.symbol {
			font-size: $uni-font-size-mini;
		}

		.number {
			font-size: $uni-font-size-base;
			font-weight: bold;
		}

		.order-detail {
			margin-left: 22rpx;
			color: $uni-color-primary;

			.iconfont {
				position: relative;
				top: 2rpx;
				margin-left: 8rpx;
				transition: .3s;
			}

			&.on {
				.iconfont {
					transform: rotate(180deg);
				}
			}
		}

		.btn {
			@extend .alignJustify;
			width: 100%;
			height: 88rpx;
			font-size: 32rpx;
			border-radius: 20rpx;
			background-color: #2dbb55;
			color: $uni-text-color-inverse;

			&.disabled {
				background-color: #d0d0d0;
			}
		}
	}

	.agreement-info {
		@extend .displayflex;
		padding: 0 30rpx 14rpx;
		text-align: center;
		margin-top: 40rpx;

		.iconfont {
			margin: 6rpx 0rpx 0 60rpx;
			color: #a4a3aa;

			&.on {
				color: $uni-color-success;
			}
		}

		.content {
			@extend .flex1;
			width: 500rpx;
			line-height: 1.667;
			font-size: $uni-font-size-sm;
		}

		.info-link {
			color: $uni-color-success;
		}
	}

	.text-t {
		width: 80rpx;
		font-size: 38rpx;
		text-align: center;
		margin: 40rpx auto;
		font-weight: bold;
		padding: 0 10rpx;
		border-bottom: 10rpx solid #fa5b34;
	}

	.text-b {
		color: #fa5b34;
		font-size: 30rpx;
		margin: 40rpx 0;
		font-weight: bold;
	}

	.date-box {
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		margin-bottom: 40rpx;

		.date-text {
			font-size: 28rpx;
			font-weight: bold;
			color: #c2c2c2;
		}

		.date-pick {
			margin-top: 20rpx;
			font-size: 36rpx;
			color: #000;
			font-weight: bold;
		}
	}
</style>